<template>
  <div class="container" v-loading="loading" element-loading-text="数据处理中，请耐心等待......" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-row type="flex" justify="space-between" align="middle">
      <el-button type="success" icon="el-icon-download" @click="exportExcel">导出</el-button>
      <el-col :span="17">

      </el-col>
      <el-col :span="7">
        <el-row type="flex" justify="space-around">
          <el-date-picker style="" v-model="pageInfo.date" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-button @click="queryData" type="primary" icon="el-icon-search">查询</el-button>
          <el-button style="margin-left: 10px" @click="clearFn" type="danger" icon="el-icon-delete">清除</el-button>
        </el-row>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%;margin-top:15px;" border :cell-class-name="tableCellClassName" :row-style="{height:'40px'}">
      <el-table-column prop="netCode" label="台网码" align="center"></el-table-column>
      <el-table-column prop="staCode" label="台站码" align="center"></el-table-column>
      <el-table-column prop="chanNum" label="通道号" align="center"></el-table-column>
      <el-table-column prop="chanCode" label="通道代码" align="center"></el-table-column>
      <el-table-column prop="staType" label="台站类型" align="center"></el-table-column>
      <el-table-column prop="availRate" label="可用率" align="center"></el-table-column>
      <el-table-column prop="exceptionPercentage" label="延时次数期望占比" align="center" width="140"></el-table-column>
      <el-table-column prop="delayAmp" label="延时幅值" align="center"></el-table-column>
      <el-table-column prop="breakNum" label="断记次数" align="center"></el-table-column>
      <el-table-column prop="breakDuration" label="当日累计断记时长" align="center" width="140"></el-table-column>
      <el-table-column prop="activeAlarmNum" label="采样率变化次数" align="center"></el-table-column>
      <el-table-column prop="mampNum" label="波形异常次数" align="center"></el-table-column>
      <el-table-column prop="online" label="是否在线" align="center"></el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { fetchAllInfo } from '@/api'
export default {
  name: 'Home',
  data () {
    return {
      tableData: [],
      pageInfo: {
        date: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      loading: false
    }
  },
  created () {
    // this.getALLInfoData()
  },
  methods: {
    async getALLInfoData () {
      this.loading = true
      if (!this.pageInfo.date) {
        this.loading = false
        return this.$message.warning('请设置查询日期')
      }
      // 数据组装
      const queryInfo = {
        ...this.pageInfo,
        dateParam: this.pageInfo.date
      }
      const { data: { data } } = await fetchAllInfo(queryInfo)
      console.log(data)
      this.tableData = data.records
      this.total = data.total
      if (data.records.length === 0) {
        this.$notify.info({
          title: '提示',
          message: '设定时间段内无错误/异常数据'
        })
      }
      console.warn(data)
      this.loading = false
    },
    handleSizeChange (newSize) {
      this.pageInfo.pageSize = newSize
      this.getALLInfoData()
    },
    handleCurrentChange (newNum) {
      this.pageInfo.pageNum = newNum
      this.getALLInfoData()
    },
    queryData () {
      if (!this.pageInfo.date) {
        return this.$message.warning('请设置查询日期')
      }
      this.getALLInfoData()
    },
    clearFn () {
      this.pageInfo = {
        date: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getALLInfoData()
    },
    async exportExcel () {
      // 不指定日期，默认只导出七天的
      if (!this.pageInfo.date) return this.$message.warning('未设置下载日期')

      this.$notify.info({
        title: '提示',
        message: '开始下载综合信息表.xlsx文件，请稍候'
      })

      // 包裹多表数据变量定义
      const allHeader = []
      const allMerges = []
      const allData = []

      // 注意获取基本信息接口传pageSize为-1拿全部数据
      const queryInfo = {
        ...this.pageInfo,
        dateParam: this.pageInfo.date
      }
      const header = ['台网码', '台站码', '通道号', '通道代码', '台站类型', '可用率', '延时次数期望占比', '延时幅值', '断记次数', '当日累计断记时长', '采样率变化次数', '波形异常次数', '是否在线']
      allHeader.push(header)
      const { data: { data } } = await fetchAllInfo(queryInfo)
      const sortData = data.records.map(item => {
        console.log(item)
        // +红 *绿 -黄
        return [item.netCode, item.staCode, item.chanNum, item.chanCode, item.staType, item.availRate + item.availRateColor, item.exceptionPercentage + item.exceptionPercentageColor, item.delayAmp + item.delayAmpColor, item.breakNum + item.breakNumColor, item.breakDuration + item.breakDurationColor, item.activeAlarmNum + item.activeAlarmNumColor ? item.activeAlarmNumColor : '白色', item.mampNum + item.mampNumColor ? item.mampNumColor : '白色', item.online]
      })
      allData.push(sortData)
      console.log(allData[0][0])
      allMerges.push([])
      import('@/utils/exportNew').then(excel => {
        excel.export_json_to_excel({
          // header: [header],
          header: allHeader,
          // data: [[['鹿琛', '12']], [['尘世', '18']]],
          // data: [tableData],
          data: allData,
          filename: '综合信息表',
          autoWidth: true,
          // merges: [[]],
          merges: allMerges,
          bookType: 'xlsx',
          SheetNames: ['综合信息']
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 表格颜色
    tableCellClassName ({ row, column }) {
      switch (column.property) {
        case 'activeAlarmNum':
          if (row.activeAlarmNumColor === '红色') {
            return 'red'
          } else if (row.activeAlarmNumColor === '黄色') {
            return 'yellow'
          } else if (row.activeAlarmNumColor === '绿色') {
            return 'green'
          } else {
            return 'normal'
          }
        case 'availRate':
          if (row.availRateColor === '红色') {
            return 'red'
          } else if (row.availRateColor === '黄色') {
            return 'yellow'
          } else if (row.availRateColor === '绿色') {
            return 'green'
          } else {
            return 'normal'
          }
        case 'breakDuration':
          if (row.breakDurationColor === '红色') {
            return 'red'
          } else if (row.breakDurationColor === '黄色') {
            return 'yellow'
          } else if (row.breakDurationColor === '绿色') {
            return 'green'
          } else {
            return 'normal'
          }
        case 'breakNum':
          if (row.breakNumColor === '红色') {
            return 'red'
          } else if (row.breakNumColor === '黄色') {
            return 'yellow'
          } else if (row.breakNumColor === '绿色') {
            return 'green'
          } else {
            return 'normal'
          }
        case 'delayAmp':
          if (row.delayAmpColor === '红色') {
            return 'red'
          } else if (row.delayAmpColor === '黄色') {
            return 'yellow'
          } else if (row.delayAmpColor === '绿色') {
            return 'green'
          } else {
            return 'normal'
          }
        case 'exceptionPercentage':
          if (row.exceptionPercentageColor === '红色') {
            return 'red'
          } else if (row.exceptionPercentageColor === '黄色') {
            return 'yellow'
          } else if (row.exceptionPercentageColor === '绿色') {
            return 'green'
          } else {
            return 'normal'
          }
        case 'mampNum':
          if (row.mampNumColor === '红色') {
            return 'red'
          } else if (row.mampNumColor === '黄色') {
            return 'yellow'
          } else if (row.mampNumColor === '绿色') {
            return 'green'
          } else {
            return 'normal'
          }
        default:
          return 'normal'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  // padding-top: 20px;
  height: calc(100vh - 60px);
  overflow: auto;
  /deep/ .el-table {
    .green {
      background: #00ff7f;
    }
    .red {
      background: #f56c6c;
    }
    .yellow {
      background: #ffeb9c;
    }
    .normal {
      background: #fff;
    }
  }

  /deep/ .setting > input:last-of-type {
    color: red;
    font-weight: bold;
  }
}

.page {
  margin-top: 20px;
}
</style>
